<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>csv</title>
</head>
<body>

<div>
    <input id="file" type="file"/>
    <h3>如果文件预览乱码,请将编码格式改为UTF-8</h3>
</div>


</body>
</html>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/fileinput.js"></script>
<script type="text/javascript" src="/js/fileinput_locale_zh.js"></script>
<script type="text/javascript" src="/bootstrap/3.3.0/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="/css/fileinput.css"/>
<script>
    +(function () {
        var FileInput = function () {
            var oFile = new Object();
            //初始化fileinput控件（第一次初始化）
            oFile.Init = function (ctrlName, uploadUrl) {
                var $file = $('#' + ctrlName);
                //初始化上传控件的样式
                $file.fileinput({
                    language: 'zh', //设置语言
                    uploadUrl: uploadUrl, //上传的地址
                    allowedFileExtensions: ['csv'],//接收的文件后缀
                    showUpload: true, //是否显示上传按钮
                    showCaption: false,//是否显示标题
                    browseClass: "btn btn-primary", //按钮样式
                    maxFileCount: 1, //表示允许同时上传的最大文件个数
                    enctype: 'multipart/form-data',
                    validateInitialCount: true,
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
                });
                //导入文件上传完成之后的事件
                $file.on("fileuploaded", function (event, data, previewId, index) {
                    alert(data.response.msg);

                });


            }
            return oFile;
        };

        var oFileInput = new FileInput();
        oFileInput.Init("file", "/csv/upload");
    })();
</script>